<!DOCTYPE HTML>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Draft Tree</title> 
 
<!-- CSS Files --> 
<link type="text/css" href="jit/base.css" rel="stylesheet" /> 
<link type="text/css" href="jit/Spacetree.css" rel="stylesheet" /> 
<!-- jQuery -->
 
<meta http-equiv="Content-script-type" content="text/javascript" />

<script language="javascript" type="text/javascript" >
//Global variables.
//http://stackoverflow.com/questions/3113429/how-can-i-fire-an-event-when-i-right-click-on-a-div-inside-a-canvas-with-jquery
	/*
	Code to detect long clicks on nodes. 
	Generally if longclick >500 its a long click
	*/
	var downclick;
	var upclick;
	var longclick;
	var centeredNodeFromAndroid =1;
	var st;
</script>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

<!-- JIT Library File --> 
<script language="javascript" type="text/javascript" src="jit/jit-yc.js"></script> 
<script language="javascript" type="text/javascript" src="jit/draft_tree.js"></script> 

<!-- Include different space trees depending on viewing frome Chrome or from Android WebView with Aublog appended to the user Agent -->
<script language="javascript" type="text/javascript" >
//http://stackoverflow.com/questions/3113429/how-can-i-fire-an-event-when-i-right-click-on-a-div-inside-a-canvas-with-jquery

	//$(document).ready(function() {
	var loadPage = function(){	
		$(document)[0].oncontextmenu = function() {
			return false;
		}
		//http://m14i.wordpress.com/2009/10/25/javascript-touch-and-gesture-events-iphone-and-android/
		$("#infovis").delegate('.node', 'touchstart', function(e) {
			var d = new Date();
			downclick = d.getTime();
			e.stopPropagation()
			//alert('mouse down!'); 
			//return false;

		});
		$("#infovis").delegate('.node', 'touchend', function(e) {
			var d = new Date();
			upclick = d.getTime();
			e.stopPropagation();
			longclick=upclick-downclick;
			if (longclick > 500){
				//play the audio file after selected has fired so that the proper post id is played. timer is set to 500 as it is most likley after the select node is called.
				setTimeout("playSelectedId()",500);
			}
			//alert('mouse up!' + longclick );
			//return false;

		});
	//});


	function isNativeApp() {
	    return /AuBlog\/[0-9\.]+$/.test(navigator.userAgent);
	}
	if( isNativeApp() ) {
		//http://stackoverflow.com/questions/2314886/how-can-i-debug-javascript-on-android
		console.error('1');
		console.info('2');
		console.log('3');
	 	console.warn('4');
		 
	    function showAndroidToast(toast) {
			Android.showToast("Toast:"+toast);
	    }
	    function editId(id){
	    	Android.editId(id);
	    }
	    function playSelectedId(){
	    	Android.playSelectedId();
	    }
	    function deleteId(id){
	    	Android.deleteId(id);
	    }
	    function setCenterTree(id){
	    	centeredNodeFromAndroid=id;
	    	st.onClick(Android.getCenteredNode());
	    }
	    function loadJsonData(){
	    	 Android.loadData();
	    }
	    function refreshTree(){
	    	Android.refreshTree();
	    }
	    function exportTree(){
	    	Android.exportTree();
	    }
		//addJavascript('/mnt/sdcard/Android/data/ca.ilanguage.aublog/files/draft_space_tree.js','head');
		//http://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-file
		$.getScript("/mnt/sdcard/Android/data/ca.ilanguage.aublog/files/draft_tree_data.js", function(){
			/*
			TODO bug returned on motorla xoom running Android 3.x even with the finsihed loading dialog, it still cant load the javascript first. 
			the webkit must running async tasks differently...
			*/
			//alert("Finished loading.");
			   // here you can use anything you defined in the loaded script
				centeredNodeFromAndroid = Android.getCenteredNode();
			   init(draftTreeData);
			   /*
			   resume the tree in the last position that a node was edited (either in the view tree, or in the edit activity)
			   */
			   
				/* if(centeredNodeFromAndroid != null){
					st.onClick(centeredNodeFromAndroid);
				}else{
					//do nothingst.onClick("1");
				} */
			   /* http://thejit.org/static/v20/Docs/files/Visualizations/Spacetree-js.html#ST.onClick
			   st.onClick(97);
				Android.showToast(JSON.stringify(st)); */
				//setTimeout("st.onClick(97)",2000);
				//setTimeout("setCenterTree(centeredNodeFromAndroid)",2000);
				//http://weltermann17.wordpress.com/2009/07/02/jit-gwt-a-low-cost-solution-2/
			});
	}else{
		$.getScript("draft_tree_data.js", function(){
			   //alert("Loaded in Browser mode.");
			   // here you can use anything you defined in the loaded script
				init(draftTreeData);
			});
	}
}	
</script>
 
</head> 
 
<body > 


<div id="container">
 
<div id="left-container"> 
 <h3>Draft Tree</h3>
 
<!-- Didnt need anymore on 2.x, javascript was loading in sequential order but in 3.x it is not-->
<input type="button" value="Refresh" onClick="loadPage()" />
<input type="button" value="Export/Email..." onClick="exportTree()" />
<!-- TODO Itteration 3 add button "Hide Deleted Nodes" -->
<h4>Tree Orientation</h4> 
<table> 
    <tr> 
         <td> 
            <label for="r-top">Top </label> 
         </td> 
         <td> 
            <input type="radio" id="r-top" name="orientation" checked="checked" value="top"   /> 
         </td> 
    </tr> 
    <tr> 
        <td> 
            <label for="r-left">Left </label> 
        </td> 
        <td> 
            <input type="radio" id="r-left" name="orientation"  value="left" /> 
        </td> 
    </tr> 

    <tr> 
         <td> 
            <label for="r-bottom">Bottom </label> 
          </td> 
          <td> 
            <input type="radio" id="r-bottom" name="orientation" value="bottom" /> 
          </td> 
    </tr> 
    <tr> 
          <td> 
            <label for="r-right">Right </label> 
          </td> 
          <td> 
           <input type="radio" id="r-right" name="orientation" value="right" /> 
          </td> 
    </tr> 

</table> 
 <!-- 
 <h4>Selection Mode</h4> 
<table> 
    <tr> 
        <td> 
            <label for="s-normal">Normal </label> 
        </td> 
        <td> 
            <input type="radio" id="s-normal" name="selection" checked="checked" value="normal"   /> 
        </td> 
    </tr> 
    <tr> 
         <td> 
            <label for="s-root">Set as Root </label> 
         </td> 
         <td> 
            <input type="radio" id="s-root" name="selection" value="root" /> 
         </td> 
    </tr> 
</table> 
-->
</div> 

<div id="center-container"> 

 
    <div id="infovis" ></div>    
    
<div id="log"></div> 
</div> 

</div>
</body> 
</html>
